<template>
  <yd-badge :type="type" :shape="shape" :color="color" :bgcolor="bgcolor" :scale="scale">{{contentText}}</yd-badge>
</template>

<script>
  import {VueExtend} from 'godspen-lib'
  import {Badge} from 'vue-ydui/dist/lib.px/badge'

  export default {
    mixins: [VueExtend.mixin],
    name: 'badge',
    label: process.env.LABEL,
    style: process.env.STYLE,
    stack: null, // 是否是堆叠模式 ，false：孩子元素会按楼层一个个向下排布， true: 孩子元素绝对定位，随意放置位置
    childLimit: 9999,  // 孩子元素最大限制数
    leaf: false, // 是否是叶子节点，为true的时候该节点下面不能添加节点
    props: {
      contentText: {
        type: String,
        default: '000',
        editor: {
          label: '文案内容',
          desc: '自定义文案内容',
          type: 'input'
        }
      },
      type: {
        type: String,
        default: '',
        editor: {
          label: '角标类型',
          desc: '',
          type: 'enum',
          defaultList: {
            'primary': 'primary',
            'danger': 'danger',
            'warning': 'warning',
            'hollow': 'hollow'
          }
        }
      },
      shape: {
        type: String,
        default: 'circle',
        editor: {
          label: '角标形状',
          desc: '',
          type: 'enum',
          defaultList: {
            'square': '方角',
            'circle': '圆角'
          }
        }
      },
      color: {
        type: String,
        default: '',
        editor: {
          label: '文字颜色',
          desc: '自定义文字颜色',
          type: 'input'
        }
      },
      bgcolor: {
        type: String,
        default: '',
        editor: {
          label: '背景颜色',
          desc: '自定义背景颜色',
          type: 'input'
        }
      },
      scale: {
        type: String,
        default: '',
        editor: {
          label: '缩放比例',
          desc: '缩放百分比',
          type: 'input'
        }
      }
    },
    components: {
      [Badge.name]: Badge
    },
    computed: {
    },
    editorMethods: {
    },
    methods: {
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" type="text/stylus" scoped>
  .component {
    width: 100%;
    height: 100%;
  }
</style>
